<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>방명록</title>
<script type="text/javascript">
	var count=1;
	$(document).ready(function(){
		// 글쓰기 버튼을 클릭하면 실행한다.
		$("#registerGuest").click(function(){
			var nameCheck = $(":input[name=name]").val(); // 이름값을 확인
			var passwordCheck = $(":input[name=password]").val();// 패스워드 확인
			var contentCheck = $(":input[name=content]").val(); // 내용 확인
			// 이름, 패스워드, 내용을 입력하지 않으면 등록할 수 없다.
			if(nameCheck==""){
				alert("이름을 입력하세요.");
				return false;
			} else if(passwordCheck==""){
				alert("비밀번호를 입력하세요.");
				return false;
			} else if(contentCheck==""){
				alert("내용을 입력하세요");	
				return false;
			} else if(confirm("등록할거니?")){
				// 폼안의 내용을 serialize() 로 전송한다.
				var registermsg = $("#guestWriteForm").serialize();
				// alert(registermsg);
				$.ajax({
					type:"POST", 
					url:"writeGuestBoard.inven",
					dataType:"json",
					data:registermsg+"&low=1&high=5",
					success:function(jsonData){
						// 성공하면 list를 받아온다.
						$("#listView").show();
						var table = "";
						$.each(jsonData, function(index, value){
							// id 의 값을 체크해 비로그인 사용자만 수정, 삭제버튼이 뜨도록 한다.
							if(value.id==null){
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | <a href='javascript:checkPassword("
								+value.no+")'>수정</a> | "+"<a href='javascript:deleteBoard("
								+value.no+")'>삭제</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<tr><td><p>작성자 : <a href=''>"+value.name+
								"</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							}
						}); 
						// tbody 에 list 테이블을 출력한다.
						$("#allListtb").html(table);
						// 폼안의 내용을 지운다.
						$("#name").val("");
						$("#password").val("");
						$("#content").val("");
					} // success
				}); // ajax 
			} // if
			// 글쓰기 등록 취소를 눌렀을 시 폼안의 내용을 초기화한다.
			$("#name").val("");
			$("#password").val("");
			$("#content").val(""); 
		}); // 글쓰기 클릭 
		
		// 패스워드 체크창을 띄우고 취소 누를시 실행된다.
		$("#canclePasswordBtn").click(function(){
			$("#passwordView").hide();
		});
		
		// 수정폼에서 수정버튼을 누르면 실행된다.
		$("#updateGuest").click(function(){
			// 패스워드 창의 값을 초기화 한다.
			$("#checkPassword").val("");
			if(confirm("등록할거니?")){
				// 폼안의 내용을 시리얼라이즈로 데이터를 전송한다.
				var updateData = $("#updateWriteForm").serialize();
				$.ajax({
					type:"POST", 
					url:"updateGuestBoard.inven",
					dataType:"json",
					data:updateData+"&low=1&high=5",
					success:function(jsonData){
						// 성공하면 list를 받아온다.
						$("#listView").show();
						var table = "";
						$.each(jsonData, function(index, value){
							// id 의 값을 체크해 비로그인 사용자만 수정, 삭제버튼이 뜨도록 한다.
							if(value.id==null){
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | <a href='javascript:checkPassword("
								+value.no+")'>수정</a> | "+"<a href='javascript:deleteBoard("
								+value.no+")'>삭제</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<tr><td><p>작성자 : <a href=''>"+value.name+
								"</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							}
						});
						// tbody 에 list 테이블을 출력한다.
						$("#allListtb").html(table);
						// 등록 성공하면 폼안의 내용을 초기화 한다.
						$("#updatename").val("");
						$("#updatepassword").val("");
						$("#updatecontent").val("");
						// 수정폼을 숨긴다.
						$("#detailView").hide();
						// 글쓰기 폼를 보여준다
						$("#WriteView").show();
					} // success
				}); // ajax 
			} // if
			// 등록취소 누르면 폼안의 내용을 초기화 한다.
			$("#updatename").val("");
			$("#updatepassword").val("");
			$("#updatecontent").val("");
		}); // 수정버튼 click
		
		// 더보기 버튼 누를시 실행된다.
		$("#buttonView").click(function(){
			// 카운트를 5개씩 누적시켜 더 보여준다.
			count += 5;	
			$.ajax({
				type:"POST", 
				url:"boardPlusAllBoard.inven",
				dataType:"json",
				data: "low="+count+"&high="+(count+4),
				// 최소값과 최대값을 보내 해당하는 리스트를 받아온다. 
				success:function(jsonData){
					$("#listView").show();
					var table = $("#allListtb").html();
					// 마지막 더보기를 누를때는 alert() 창을 띄워 알려준다.
					if(jsonData.length == 0){
						alert("마지막페이지 입니다.");
						$("#plusView").hide();
					} else {
						$.each(jsonData, function(index, value){
							if(value.id==null){
								table += "<input type='hidden' name='guestId' value="+value.id+
								"><tr><td><p>작성자 : "+value.name+" | <a href='javascript:checkPassword("
								+value.no+")'>수정</a> | "+"<a href='javascript:deleteBoard("
								+value.no+")'>삭제</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} else{
								table += "<tr><td><p>작성자 : <a href=''>"+value.name+
								"</a> | 작성일시 : "+value.timePosted+"</p></td></tr>"+
								"<tr><td height='70'><p>"+value.content+"</p></td></tr>";
							} // if
						}); // each
					} // if
					// tbody 에 list 테이블을 출력한다.
					$("#allListtb").html(table);
				} // success
			}); // ajax
		}); // 더보기 버튼 클릭
	}); // ready
	
	// 삭제버튼 클릭시 글번호를 받아온다.
	function deleteBoard(no){
		// 패스워드 창의 값을 초기화 한다.
		$("#checkPassword").val("");
		// 패스워드 확인 창를 보여준다.
		$("#passwordView").show();
		$("#checkPasswordBtn").click(function(){
			// 패스워드 값을 넘긴다.
			var password = $("#checkPassword").val();
			// alert(password);
			$.ajax({
				type:"post",
				url:"checkGuestPassword.inven",
				dataType:"json",
				data:"no="+no+"&password="+password,
				success:function(data){
					// 비밀번호의 값이 일치하면 삭제창을 띄운다.
					if(data=="true"){
						if(confirm("삭제하시겠습니까?")){
							// 삭제를 누르면 삭제컨트롤러로 보낸다.
							location.href="deleteGuestBoard.inven?no="+no+"&low=1&high=5";
						} else {
							alert("취소");
							$("#checkPassword").val("");
							$("#passwordView").hide();
						}
					} else {
						alert("비밀번호가 틀렸어!");
						$("#checkPassword").html("");
						$("#checkPassword").focus();
					} // if
				} // success
			}); // ajax
		}); // 삭제버튼 click
		
	} // function
	
	// 리스트에서 수정버튼 클릭시 패스워드 체크창을 보여주고, 글번호를 받아온다.
	function checkPassword(no){
		// 패스워드 확인 창를 보여준다.
		$("#passwordView").show();
		$("#checkPasswordBtn").click(function(){
			// 패스워드 값을 넘긴다.
			var password = $("#checkPassword").val();
			// alert(password);
			$.ajax({
				type:"post",
				url:"checkGuestPassword.inven",
				dataType:"json",
				data:"no="+no+"&password="+password,
				success:function(data){
					// alert(data);
					if(data=="true"){
						// 패스워드가 일치하면 수정창을 보여준다.
						if(confirm("수정하시겠습니까?")){
							// 수정을 누르면 패스워드창을 숨긴다.
							$("#passwordView").hide();
							// 상세보기 폼을 호출한다.
							detailBoard(no);
						}
					} else {
						alert("비밀번호가 틀렸어!");
						$("#checkPassword").html("");
						$("#checkPassword").focus();
					} // if
				} // success
			}); // ajax 
		}); // 리스트에서 수정버튼 click 
	
	} // function
	
	// 상세보기 폼
	function detailBoard(no){
		// 상세보기 폼를 보여준다
		$("#detailView").show();
		// 글쓰기 폼을 숨긴다.
		$("#WriteView").hide();
		$.ajax({
		 	type:"post",
		  	url:"detailBoard.inven", 
		   	dataType:"json",
		   	data:"no="+no,
		   	success:function(data){
		   		// 상세보기 폼으로 수정하려는 게시물의 데이터를 보여준다.
		    	var table = "<input type='hidden' name=no value="+data.no+">"+
		    	"<tr><td><p>작성자 : <input type='text' size='10' name='name' id='updateName' value="+data.name+
		    	"> 비밀번호 : <input type='password' size='7' name='password' id='updatepassword' value="+data.password+
		    	"></p></td></tr><tr><td><textarea cols='90' rows='5'id='updatecontent' name='content'>"+
		    	data.content+"</textarea></td></tr>";
		    	$("#updatetb").html(table); 
		   	} // success
		}); // ajax 
	} // function
	 
</script>	
</head>

<body>

<%-- 비회원 글쓰기 폼 - 비밀번호 입력창을 추가한다.--%>
<div id="WriteView">
<form id="guestWriteForm">
	<table border="0" cellpadding="2" bordercolor="black" align="center">
		<tbody id="writetb">
		<tr> 
			<td><p>작성자 : <input type="text" size="10" name="name" id="name">
			비밀번호 : <input type="password" size="7" name="password" id="password"></p></td>
		</tr>
		<tr>
			<td><textarea cols="90" rows="5" name="content" id="content"></textarea></td>
		</tr>
		</tbody>
	</table>
	<span>
		<input type="button" value="글쓰기" id="registerGuest" class="guest_button">
	</span>
</form>
</div>

<%-- 상세보기 폼 --%>
<div id="detailView" style="display: none">
<form id="updateWriteForm">
	<table border="0" cellpadding="2" bordercolor="black" align="center">
		<tbody id="updatetb">
		</tbody>
	</table>
	<span>
		<input type="button" value="수정하기" id="updateGuest" class="guest_button">
	</span>
</form>
</div>

<hr class="gray_hr">

<%-- 수정과 삭제 클릭시 패스워드 확인 창을 띄운다. --%>
<div id="passwordView" style="display: none" >
패스워드 입력 : <input type="password" name="password" size="10" id="checkPassword">
				<input type="button" value="확인" id="checkPasswordBtn">
				<input type="button" value="취소" id="canclePasswordBtn">
</div>

<%-- 방명록 리스트를 가져온다. --%>
<div id="listView">
	<table border="0" width="700" cellpadding="2" align="center">
		<%-- tbody 를 설정하여 글이 추가될 때마다 스크립트에서 새로 갱신되도록 한다.--%>
		<tbody id="allListtb">
			<%-- for 문을 돌려 list 를 출력한다. --%>
			<c:forEach var="board" items="${requestScope.list }">
			<c:choose>
				<%-- id 값을 체크하여 비로그인 사용자만 수정, 삭제를 보여준다. --%>
				<c:when test="${board.id==null }">
					<input type="hidden" name="guestId" value="${board.id }">
					<tr>
						<td><p>작성자 :  ${board.name } | <a href="javascript:checkPassword(${board.no })">수정</a>
						| <a href="javascript:deleteBoard(${board.no })">삭제</a>
						| 작성일시 : ${board.timePosted }</p></td>
					</tr>
				</c:when>
				<%-- 로그인한 사용자는 수정, 삭제를 보여주지 않도록 한다. --%>
				<c:otherwise>
					<tr>
						<td><p>작성자 : <a href="">${board.name }</a> 
						| 작성일시 : ${board.timePosted }</p></td>
					</tr>
				</c:otherwise>	
			</c:choose>
					<tr>
						<td height="70">
						<p>${board.content}</p>
						</td>
					</tr>
			</c:forEach>	
		</tbody>
	</table>
</div>

<%-- 더보기 버튼 --%>
<div id="plusView"><input type="button" value="더 보기" id="buttonView" class="guest_button"></div>
</body>
</html>